<!DOCTYPE HTML>
<html lang="en-US" >
    
    <head>
        
        <meta charset="UTF-8">
        <title>用户登录视图 | 新浪微博开发笔记</title>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <meta name="description" content="">
        <meta name="generator" content="GitBook 1.0.3">
        <meta name="HandheldFriendly" content="true"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png">
        <link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">
        
    
    
    
    <link rel="next" href="../visitor/setup login info.html" />
    
    
    <link rel="prev" href="../visitor/base table view controller.html" />
    

        
    </head>
    <body>
        
        
<link rel="stylesheet" href="../gitbook/style.css">


        
    <div class="book"  data-level="0.3.2" data-basepath=".." data-revision="1446913807342">
    

<div class="book-summary">
    <div class="book-search">
        <input type="text" placeholder="Type to search" class="form-control" />
    </div>
    <ul class="summary">
        
    	
    	
    	

        

        
    
        
        <li class="chapter " data-level="0" data-path="index.html">
            
                
                    <a href="../index.html">
                        <i class="fa fa-check"></i>
                        
                         新浪微博笔记
                    </a>
                
            
            
            <ul class="articles">
                
    
        
        <li class="chapter " data-level="0.1" data-path="project init/prepare project.html">
            
                
                    <a href="../project init/prepare project.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.1.</b>
                        
                         准备工作
                    </a>
                
            
            
            <ul class="articles">
                
    
        
        <li class="chapter " data-level="0.1.1" data-path="project init/project deploy.html">
            
                
                    <a href="../project init/project deploy.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.1.1.</b>
                        
                         项目部署
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="0.1.2" data-path="project init/project settings.html">
            
                
                    <a href="../project init/project settings.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.1.2.</b>
                        
                         项目设置
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="0.1.3" data-path="project init/confirm architecture.html">
            
                
                    <a href="../project init/confirm architecture.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.1.3.</b>
                        
                         架构确定
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="0.1.4" data-path="project init/mvvm.html">
            
                
                    <a href="../project init/mvvm.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.1.4.</b>
                        
                         MVVM
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    
        
        <li class="chapter " data-level="0.2" data-path="create project/readme.html">
            
                
                    <a href="../create project/readme.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.2.</b>
                        
                         项目搭建
                    </a>
                
            
            
            <ul class="articles">
                
    
        
        <li class="chapter " data-level="0.2.1" data-path="create project/create files.html">
            
                
                    <a href="../create project/create files.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.2.1.</b>
                        
                         创建文件
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="0.2.2" data-path="create project/add child controllers.html">
            
                
                    <a href="../create project/add child controllers.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.2.2.</b>
                        
                         添加子控制器
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="0.2.3" data-path="create project/custom main tabbar.html">
            
                
                    <a href="../create project/custom main tabbar.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.2.3.</b>
                        
                         自定义 TabBar
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="0.2.4" data-path="create project/summary.html">
            
                
                    <a href="../create project/summary.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.2.4.</b>
                        
                         阶段性小结
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    
        
        <li class="chapter " data-level="0.3" data-path="visitor/readme.html">
            
                
                    <a href="../visitor/readme.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.3.</b>
                        
                         访客视图
                    </a>
                
            
            
            <ul class="articles">
                
    
        
        <li class="chapter " data-level="0.3.1" data-path="visitor/base table view controller.html">
            
                
                    <a href="../visitor/base table view controller.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.3.1.</b>
                        
                         表格视图控制器基类
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter active" data-level="0.3.2" data-path="visitor/visitor login view.html">
            
                
                    <a href="../visitor/visitor login view.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.3.2.</b>
                        
                         用户登录视图
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="0.3.3" data-path="visitor/setup login info.html">
            
                
                    <a href="../visitor/setup login info.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.3.3.</b>
                        
                         设置未登录信息
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="0.3.4" data-path="visitor/home animation.html">
            
                
                    <a href="../visitor/home animation.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.3.4.</b>
                        
                         首页动画
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="0.3.5" data-path="visitor/login buttons delegate.html">
            
                
                    <a href="../visitor/login buttons delegate.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.3.5.</b>
                        
                         登录&amp;注册代理回调
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="0.3.6" data-path="visitor/appearance.html">
            
                
                    <a href="../visitor/appearance.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.3.6.</b>
                        
                         导航栏全局外观
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    
        
        <li class="chapter " data-level="0.4" data-path="frameworks/readme.html">
            
                
                    <a href="../frameworks/readme.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.4.</b>
                        
                         第三方框架
                    </a>
                
            
            
            <ul class="articles">
                
    
        
        <li class="chapter " data-level="0.4.1" data-path="frameworks/afnetworking.html">
            
                
                    <a href="../frameworks/afnetworking.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.4.1.</b>
                        
                         AFNetworking
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="0.4.2" data-path="frameworks/svprogresshud sdwebimage.html">
            
                
                    <a href="../frameworks/svprogresshud sdwebimage.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.4.2.</b>
                        
                         SVProgressHUD 和 SDWebImage
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="0.4.3" data-path="frameworks/snapkit.html">
            
                
                    <a href="../frameworks/snapkit.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.4.3.</b>
                        
                         SnapKit
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    
        
        <li class="chapter " data-level="0.5" data-path="oauth/readme.html">
            
                
                    <a href="../oauth/readme.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.5.</b>
                        
                         OAuth
                    </a>
                
            
            
            <ul class="articles">
                
    
        
        <li class="chapter " data-level="0.5.1" data-path="oauth/register app.html">
            
                
                    <a href="../oauth/register app.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.5.1.</b>
                        
                         注册应用程序
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="0.5.2" data-path="oauth/load oauth page.html">
            
                
                    <a href="../oauth/load oauth page.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.5.2.</b>
                        
                         加载授权页面
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    
        
        <li class="chapter " data-level="0.6" data-path="access token/readme.html">
            
                
                    <a href="../access token/readme.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.6.</b>
                        
                         Access Token
                    </a>
                
            
            
            <ul class="articles">
                
    
        
        <li class="chapter " data-level="0.6.1" data-path="access token/load access token.html">
            
                
                    <a href="../access token/load access token.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.6.1.</b>
                        
                         加载 AccessToken
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="0.6.2" data-path="access token/user account.html">
            
                
                    <a href="../access token/user account.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.6.2.</b>
                        
                         用户账户模型
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="0.6.3" data-path="access token/expires date.html">
            
                
                    <a href="../access token/expires date.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.6.3.</b>
                        
                         过期日期
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="0.6.4" data-path="access token/load user info.html">
            
                
                    <a href="../access token/load user info.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.6.4.</b>
                        
                         加载用户信息
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="0.6.5" data-path="access token/archive user account.html">
            
                
                    <a href="../access token/archive user account.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.6.5.</b>
                        
                         归档 &amp; 解档
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="0.6.6" data-path="access token/view model.html">
            
                
                    <a href="../access token/view model.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.6.6.</b>
                        
                         视图模型
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="0.6.7" data-path="access token/error enum.html">
            
                
                    <a href="../access token/error enum.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.6.7.</b>
                        
                         自定义错误枚举
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    
        
        <li class="chapter " data-level="0.7" data-path="newfeature/README.html">
            
                
                    <a href="../newfeature/README.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.7.</b>
                        
                         新特性和欢迎界面
                    </a>
                
            
            
            <ul class="articles">
                
    
        
        <li class="chapter " data-level="0.7.1" data-path="newfeature/newfeature.html">
            
                
                    <a href="../newfeature/newfeature.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.7.1.</b>
                        
                         新特性
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="0.7.2" data-path="newfeature/welcome.html">
            
                
                    <a href="../newfeature/welcome.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.7.2.</b>
                        
                         欢迎界面
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="0.7.3" data-path="newfeature/switch vc.html">
            
                
                    <a href="../newfeature/switch vc.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.7.3.</b>
                        
                         切换界面
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    
        
        <li class="chapter " data-level="0.8" data-path="appendix/readme.html">
            
                
                    <a href="../appendix/readme.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.8.</b>
                        
                         附录
                    </a>
                
            
            
            <ul class="articles">
                
    
        
        <li class="chapter " data-level="0.8.1" data-path="appendix/image assets.html">
            
                
                    <a href="../appendix/image assets.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.8.1.</b>
                        
                         图片素材
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="0.8.2" data-path="appendix/cocoa pod.html">
            
                
                    <a href="../appendix/cocoa pod.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.8.2.</b>
                        
                         cocoa pod
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="0.8.3" data-path="appendix/singleton.html">
            
                
                    <a href="../appendix/singleton.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.8.3.</b>
                        
                         单例
                    </a>
                
            
            
        </li>
    
        
        <li class="chapter " data-level="0.8.4" data-path="appendix/swift_vs_oc.html">
            
                
                    <a href="../appendix/swift_vs_oc.html">
                        <i class="fa fa-check"></i>
                        
                            <b>0.8.4.</b>
                        
                         为什么要学习 Swift
                    </a>
                
            
            
        </li>
    

            </ul>
            
        </li>
    

            </ul>
            
        </li>
    


        
        <li class="divider"></li>
        <li>
            <a href="http://www.gitbook.io/" target="blank" class="gitbook-link">Published using GitBook</a>
        </li>
        
    </ul>
</div>

    <div class="book-body">
        <div class="body-inner">
            <div class="book-header">
    <!-- Actions Left -->
    <a href="#" class="btn pull-left toggle-summary" aria-label="Toggle summary"><i class="fa fa-align-justify"></i></a>
    <a href="#" class="btn pull-left toggle-search" aria-label="Toggle search"><i class="fa fa-search"></i></a>
    
    <div id="font-settings-wrapper" class="dropdown pull-left">
        <a href="#" class="btn toggle-dropdown" aria-label="Toggle font settings"><i class="fa fa-font"></i>
        </a>
        <div class="dropdown-menu font-settings">
    <div class="dropdown-caret">
        <span class="caret-outer"></span>
        <span class="caret-inner"></span>
    </div>

    <div class="buttons">
        <button type="button" id="reduce-font-size" class="button size-2">A</button>
        <button type="button" id="enlarge-font-size" class="button size-2">A</button>
    </div>

    <div class="buttons font-family-list">
        <button type="button" data-font="0" class="button">Serif</button>
        <button type="button" data-font="1" class="button">Sans</button>
    </div>

    <div class="buttons color-theme-list">
        <button type="button" id="color-theme-preview-0" class="button size-3" data-theme="0">White</button>
        <button type="button" id="color-theme-preview-1" class="button size-3" data-theme="1">Sepia</button>
        <button type="button" id="color-theme-preview-2" class="button size-3" data-theme="2">Night</button>
    </div>
</div>

    </div>

    <!-- Actions Right -->
    
    <div class="dropdown pull-right">
        <a href="#" class="btn toggle-dropdown" aria-label="Toggle share dropdown"><i class="fa fa-share-alt"></i>
        </a>
        <div class="dropdown-menu font-settings dropdown-left">
            <div class="dropdown-caret">
                <span class="caret-outer"></span>
                <span class="caret-inner"></span>
            </div>
            <div class="buttons">
                <button type="button" data-sharing="twitter" class="button">Twitter</button>
                <button type="button" data-sharing="google-plus" class="button">Google</button>
                <button type="button" data-sharing="facebook" class="button">Facebook</button>
                <button type="button" data-sharing="weibo" class="button">Weibo</button>
                <button type="button" data-sharing="instapaper" class="button">Instapaper</button>
            </div>
        </div>
    </div>
    

    
    <a href="#" target="_blank" class="btn pull-right google-plus-sharing-link sharing-link" data-sharing="google-plus" aria-label="Share on Google Plus"><i class="fa fa-google-plus"></i></a>
    
    
    <a href="#" target="_blank" class="btn pull-right facebook-sharing-link sharing-link" data-sharing="facebook" aria-label="Share on Facebook"><i class="fa fa-facebook"></i></a>
    
    
    <a href="#" target="_blank" class="btn pull-right twitter-sharing-link sharing-link" data-sharing="twitter" aria-label="Share on Twitter"><i class="fa fa-twitter"></i></a>
    
    

    <!-- Title -->
    <h1>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <a href="../" >新浪微博开发笔记</a>
    </h1>
</div>

            <div class="page-wrapper" tabindex="-1">
                <div class="page-inner">
                
                
                    <section class="normal" id="section-gitbook_275">
                    
                        <h1 id="">用户登录视图</h1>
<blockquote>
<p>对于第三方开发者，新浪没有开放未登录访问数据的权限，因此在用户登录之前，无法 <code>加载微博数据</code> 以及 <code>关注用户</code></p>
</blockquote>
<h2 id="">需求确定</h2>
<ul>
<li>用户登录操作视图，用户没有登录时替换表格控制器的根视图</li>
<li>每个功能模块的登录视图包含以下四个控件<ul>
<li>模块图标</li>
<li>描述文字</li>
<li>注册按钮</li>
<li>登录按钮</li>
</ul>
</li>
<li>特例<ul>
<li>首页有一个小的转轮图片会不停旋转</li>
</ul>
</li>
</ul>
<h2 id="">功能实现</h2>
<ul>
<li>拖拽相关图片素材</li>
<li>新建 <code>VisitorLoginView.swift</code> 继承自 <code>UIView</code></li>
</ul>
<pre><code class="lang-swift"><span class="hljs-comment">/// 访客视图</span>
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">VisitorLoginView</span>: <span class="hljs-title">UIView</span> </span>{

    <span class="hljs-comment">// MARK: - 设置界面</span>
    <span class="hljs-keyword">override</span> <span class="hljs-keyword">init</span>(frame: <span class="hljs-type">CGRect</span>) {
        <span class="hljs-keyword">super</span>.<span class="hljs-keyword">init</span>(frame: frame)

        setupUI()
    }

    required <span class="hljs-keyword">init</span>?(coder aDecoder: <span class="hljs-type">NSCoder</span>) {
        <span class="hljs-keyword">super</span>.<span class="hljs-keyword">init</span>(coder: aDecoder)

        setupUI()
    }

    <span class="hljs-comment">/// 设置界面</span>
    private <span class="hljs-func"><span class="hljs-keyword">func</span> <span class="hljs-title">setupUI</span><span class="hljs-params">()</span> </span>{

    }
}
</code></pre>
<ul>
<li>修改 <code>setupVisitorView</code> 函数</li>
</ul>
<pre><code class="lang-swift"><span class="hljs-comment">// 替换根视图</span>
view = <span class="hljs-type">VisitorLoginView</span>()
</code></pre>
<ul>
<li>添加 <code>UIImageView</code> 的便利构造函数</li>
</ul>
<pre><code class="lang-swift"><span class="hljs-comment">/// 使用图像名称创建 UIImageView</span>
<span class="hljs-comment">///</span>
<span class="hljs-comment">/// - parameter imageName: imageName</span>
<span class="hljs-comment">///</span>
<span class="hljs-comment">/// - returns: UIImageView</span>
convenience <span class="hljs-keyword">init</span>(imageName: <span class="hljs-type">String</span>) {
    <span class="hljs-keyword">self</span>.<span class="hljs-keyword">init</span>(image: <span class="hljs-type">UIImage</span>(named: imageName))

    sizeToFit()
}
</code></pre>
<ul>
<li>添加 <code>UIButton</code> 的便利构造函数</li>
</ul>
<pre><code class="lang-swift"><span class="hljs-comment">/// 便利构造函数</span>
<span class="hljs-comment">///</span>
<span class="hljs-comment">/// - parameter title:         标题</span>
<span class="hljs-comment">/// - parameter color:         字体颜色</span>
<span class="hljs-comment">/// - parameter fontSize:      字号</span>
<span class="hljs-comment">/// - parameter backImageName: 背景图像名称</span>
<span class="hljs-comment">///</span>
<span class="hljs-comment">/// - returns: UIButton</span>
convenience <span class="hljs-keyword">init</span>(title: <span class="hljs-type">String</span>, color: <span class="hljs-type">UIColor</span>, fontSize: <span class="hljs-type">CGFloat</span>, backImageName: <span class="hljs-type">String</span>) {
    <span class="hljs-keyword">self</span>.<span class="hljs-keyword">init</span>()

    setTitle(title, forState: .<span class="hljs-type">Normal</span>)
    setTitleColor(color, forState: .<span class="hljs-type">Normal</span>)

    titleLabel?.font = <span class="hljs-type">UIFont</span>.systemFontOfSize(fontSize)

    setBackgroundImage(<span class="hljs-type">UIImage</span>(named: backImageName), forState: .<span class="hljs-type">Normal</span>)
    setBackgroundImage(<span class="hljs-type">UIImage</span>(named: backImageName + <span class="hljs-string">"_highlighted"</span>), forState: .<span class="hljs-type">Highlighted</span>)
}
</code></pre>
<ul>
<li>添加界面元素</li>
</ul>
<pre><code class="lang-swift"><span class="hljs-comment">/// 设置界面</span>
private <span class="hljs-func"><span class="hljs-keyword">func</span> <span class="hljs-title">setupUI</span><span class="hljs-params">()</span> </span>{
    <span class="hljs-comment">// 1. 添加控件</span>
    addSubview(iconView)
    addSubview(homeIconView)
    addSubview(messageLabel)
    addSubview(registerButton)
    addSubview(loginButton)
}

<span class="hljs-comment">// MARK: - 懒加载控件</span>
<span class="hljs-comment">/// 图标图片</span>
private lazy <span class="hljs-keyword">var</span> iconView: <span class="hljs-type">UIImageView</span> = <span class="hljs-type">UIImageView</span>(imageName: <span class="hljs-string">"visitordiscover_feed_image_smallicon"</span>)
<span class="hljs-comment">/// 小房子</span>
private lazy <span class="hljs-keyword">var</span> homeIconView: <span class="hljs-type">UIImageView</span> = <span class="hljs-type">UIImageView</span>(imageName: <span class="hljs-string">"visitordiscover_feed_image_house"</span>)
<span class="hljs-comment">/// 描述文字</span>
private lazy <span class="hljs-keyword">var</span> messageLabel: <span class="hljs-type">UILabel</span> = {
    <span class="hljs-keyword">let</span> label = <span class="hljs-type">UILabel</span>()

    label.text = <span class="hljs-string">"关注一些人，回这里看看有什么惊喜关注一些人，回这里看看有什么惊喜"</span>

    label.sizeToFit()

    <span class="hljs-keyword">return</span> label
}()

<span class="hljs-comment">/// 注册按钮</span>
private lazy <span class="hljs-keyword">var</span> registerButton: <span class="hljs-type">UIButton</span> = <span class="hljs-type">UIButton</span>(title: <span class="hljs-string">"注册"</span>, color: <span class="hljs-type">UIColor</span>.orangeColor(), fontSize: <span class="hljs-number">14</span>, backImageName: <span class="hljs-string">"common_button_white_disable"</span>)
<span class="hljs-comment">/// 登录按钮</span>
private lazy <span class="hljs-keyword">var</span> loginButton: <span class="hljs-type">UIButton</span> = <span class="hljs-type">UIButton</span>(title: <span class="hljs-string">"登录"</span>, color: <span class="hljs-type">UIColor</span>.darkGrayColor(), fontSize: <span class="hljs-number">14</span>, backImageName: <span class="hljs-string">"common_button_white_disable"</span>)
</code></pre>
<h3 id="">设置自动布局</h3>
<ul>
<li>取消 <code>AutoresizingMask</code> 属性</li>
</ul>
<pre><code class="lang-swift"><span class="hljs-comment">// 2. 自动布局</span>
<span class="hljs-comment">// 0&gt; 取消 aotoresizing 属性</span>
<span class="hljs-keyword">for</span> v <span class="hljs-keyword">in</span> subviews {
    v.translatesAutoresizingMaskIntoConstraints = <span class="hljs-built_in">false</span>
}
</code></pre>
<ul>
<li>设置图标约束 - 参照视图居中对齐</li>
</ul>
<pre><code class="lang-swift"><span class="hljs-comment">// 1&gt; 图标</span>
addConstraint(<span class="hljs-type">NSLayoutConstraint</span>(item: iconView, attribute: .<span class="hljs-type">CenterX</span>, relatedBy: .<span class="hljs-type">Equal</span>, toItem: <span class="hljs-keyword">self</span>, attribute: .<span class="hljs-type">CenterX</span>, multiplier: <span class="hljs-number">1.0</span>, constant: <span class="hljs-number">0</span>))
addConstraint(<span class="hljs-type">NSLayoutConstraint</span>(item: iconView, attribute: .<span class="hljs-type">CenterY</span>, relatedBy: .<span class="hljs-type">Equal</span>, toItem: <span class="hljs-keyword">self</span>, attribute: .<span class="hljs-type">CenterY</span>, multiplier: <span class="hljs-number">1.0</span>, constant: -<span class="hljs-number">60</span>))
</code></pre>
<ul>
<li>设置首页小房子 - 参照图标居中对齐</li>
</ul>
<pre><code class="lang-swift"><span class="hljs-comment">// 2&gt; 小房子</span>
addConstraint(<span class="hljs-type">NSLayoutConstraint</span>(item: homeIconView, attribute: .<span class="hljs-type">CenterX</span>, relatedBy: .<span class="hljs-type">Equal</span>, toItem: iconView, attribute: .<span class="hljs-type">CenterX</span>, multiplier: <span class="hljs-number">1.0</span>, constant: <span class="hljs-number">0</span>))
addConstraint(<span class="hljs-type">NSLayoutConstraint</span>(item: homeIconView, attribute: .<span class="hljs-type">CenterY</span>, relatedBy: .<span class="hljs-type">Equal</span>, toItem: iconView, attribute: .<span class="hljs-type">CenterY</span>, multiplier: <span class="hljs-number">1.0</span>, constant: <span class="hljs-number">0</span>))
</code></pre>
<ul>
<li>设置文本 - 参照图标，水平居中，下方 16 个点</li>
</ul>
<pre><code class="lang-swift"><span class="hljs-comment">// 3&gt; 描述文字</span>
addConstraint(<span class="hljs-type">NSLayoutConstraint</span>(item: messageLabel, attribute: .<span class="hljs-type">CenterX</span>, relatedBy: .<span class="hljs-type">Equal</span>, toItem: iconView, attribute: .<span class="hljs-type">CenterX</span>, multiplier: <span class="hljs-number">1.0</span>, constant: <span class="hljs-number">0</span>))
addConstraint(<span class="hljs-type">NSLayoutConstraint</span>(item: messageLabel, attribute: .<span class="hljs-type">Top</span>, relatedBy: .<span class="hljs-type">Equal</span>, toItem: iconView, attribute: .<span class="hljs-type">Bottom</span>, multiplier: <span class="hljs-number">1.0</span>, constant: <span class="hljs-number">16</span>))
</code></pre>
<ul>
<li>在懒加载函数中设置描述文字属性</li>
</ul>
<pre><code class="lang-swift"><span class="hljs-comment">/// 描述文字</span>
private lazy <span class="hljs-keyword">var</span> messageLabel: <span class="hljs-type">UILabel</span> = {
    <span class="hljs-keyword">let</span> label = <span class="hljs-type">UILabel</span>()

    label.text = <span class="hljs-string">"关注一些人，回这里看看有什么惊喜关注一些人，回这里看看有什么惊喜"</span>
    label.font = <span class="hljs-type">UIFont</span>.systemFontOfSize(<span class="hljs-number">14</span>)
    label.textColor = <span class="hljs-type">UIColor</span>.darkGrayColor()
    label.numberOfLines = <span class="hljs-number">0</span>

    label.sizeToFit()

    <span class="hljs-keyword">return</span> label
}()
</code></pre>
<ul>
<li>增加文本宽度约束 - 224，高度约束 - 36</li>
</ul>
<pre><code class="lang-swift">addConstraint(<span class="hljs-type">NSLayoutConstraint</span>(item: messageLabel, attribute: .<span class="hljs-type">Width</span>, relatedBy: .<span class="hljs-type">Equal</span>, toItem: <span class="hljs-built_in">nil</span>, attribute: .<span class="hljs-type">NotAnAttribute</span>, multiplier: <span class="hljs-number">1.0</span>, constant: <span class="hljs-number">224</span>))
addConstraint(<span class="hljs-type">NSLayoutConstraint</span>(item: messageLabel, attribute: .<span class="hljs-type">Height</span>, relatedBy: .<span class="hljs-type">Equal</span>, toItem: <span class="hljs-built_in">nil</span>, attribute: .<span class="hljs-type">NotAnAttribute</span>, multiplier: <span class="hljs-number">1.0</span>, constant: <span class="hljs-number">36</span>))
</code></pre>
<ul>
<li>注册按钮，文本标签左下(16)对齐，宽度 100，高度 36</li>
</ul>
<pre><code class="lang-swift"><span class="hljs-comment">// 4&gt; 注册按钮</span>
addConstraint(<span class="hljs-type">NSLayoutConstraint</span>(item: registerButton, attribute: .<span class="hljs-type">Left</span>, relatedBy: .<span class="hljs-type">Equal</span>, toItem: messageLabel, attribute: .<span class="hljs-type">Left</span>, multiplier: <span class="hljs-number">1.0</span>, constant: <span class="hljs-number">0</span>))
addConstraint(<span class="hljs-type">NSLayoutConstraint</span>(item: registerButton, attribute: .<span class="hljs-type">Top</span>, relatedBy: .<span class="hljs-type">Equal</span>, toItem: messageLabel, attribute: .<span class="hljs-type">Bottom</span>, multiplier: <span class="hljs-number">1.0</span>, constant: <span class="hljs-number">16</span>))
addConstraint(<span class="hljs-type">NSLayoutConstraint</span>(item: registerButton, attribute: .<span class="hljs-type">Width</span>, relatedBy: .<span class="hljs-type">Equal</span>, toItem: <span class="hljs-built_in">nil</span>, attribute: .<span class="hljs-type">NotAnAttribute</span>, multiplier: <span class="hljs-number">1.0</span>, constant: <span class="hljs-number">100</span>))
addConstraint(<span class="hljs-type">NSLayoutConstraint</span>(item: registerButton, attribute: .<span class="hljs-type">Height</span>, relatedBy: .<span class="hljs-type">Equal</span>, toItem: <span class="hljs-built_in">nil</span>, attribute: .<span class="hljs-type">NotAnAttribute</span>, multiplier: <span class="hljs-number">1.0</span>, constant: <span class="hljs-number">36</span>))
</code></pre>
<ul>
<li><p>调整按钮背景图片切片</p>
</li>
<li><p>登录按钮，文本标签右下(16)对齐，宽度 100，高度 36</p>
</li>
</ul>
<pre><code class="lang-swift"><span class="hljs-comment">// 5&gt; 登录按钮</span>
addConstraint(<span class="hljs-type">NSLayoutConstraint</span>(item: loginButton, attribute: .<span class="hljs-type">Right</span>, relatedBy: .<span class="hljs-type">Equal</span>, toItem: messageLabel, attribute: .<span class="hljs-type">Right</span>, multiplier: <span class="hljs-number">1.0</span>, constant: <span class="hljs-number">0</span>))
addConstraint(<span class="hljs-type">NSLayoutConstraint</span>(item: loginButton, attribute: .<span class="hljs-type">Top</span>, relatedBy: .<span class="hljs-type">Equal</span>, toItem: messageLabel, attribute: .<span class="hljs-type">Bottom</span>, multiplier: <span class="hljs-number">1.0</span>, constant: <span class="hljs-number">16</span>))
addConstraint(<span class="hljs-type">NSLayoutConstraint</span>(item: loginButton, attribute: .<span class="hljs-type">Width</span>, relatedBy: .<span class="hljs-type">Equal</span>, toItem: <span class="hljs-built_in">nil</span>, attribute: .<span class="hljs-type">NotAnAttribute</span>, multiplier: <span class="hljs-number">1.0</span>, constant: <span class="hljs-number">100</span>))
addConstraint(<span class="hljs-type">NSLayoutConstraint</span>(item: loginButton, attribute: .<span class="hljs-type">Height</span>, relatedBy: .<span class="hljs-type">Equal</span>, toItem: <span class="hljs-built_in">nil</span>, attribute: .<span class="hljs-type">NotAnAttribute</span>, multiplier: <span class="hljs-number">1.0</span>, constant: <span class="hljs-number">36</span>))
</code></pre>
<ul>
<li>调整控件整体垂直位置</li>
</ul>
<pre><code class="lang-swift">addConstraint(<span class="hljs-type">NSLayoutConstraint</span>(item: iconView, attribute: .<span class="hljs-type">CenterY</span>, relatedBy: .<span class="hljs-type">Equal</span>, toItem: <span class="hljs-keyword">self</span>, attribute: .<span class="hljs-type">CenterY</span>, multiplier: <span class="hljs-number">1.0</span>, constant: -<span class="hljs-number">60</span>))
</code></pre>
<ul>
<li>抽取 UILabel 的便利构造函数</li>
</ul>
<pre><code class="lang-swift"><span class="hljs-comment">/// 遍历构造函数</span>
<span class="hljs-comment">///</span>
<span class="hljs-comment">/// - parameter title:    title</span>
<span class="hljs-comment">/// - parameter fontSize: fontSize</span>
<span class="hljs-comment">/// - parameter color:    color</span>
<span class="hljs-comment">///</span>
<span class="hljs-comment">/// - returns: UILabel</span>
convenience <span class="hljs-keyword">init</span>(title: <span class="hljs-type">String</span>, fontSize: <span class="hljs-type">CGFloat</span>, color: <span class="hljs-type">UIColor</span>) {
    <span class="hljs-keyword">self</span>.<span class="hljs-keyword">init</span>()

    text = title
    font = <span class="hljs-type">UIFont</span>.systemFontOfSize(fontSize)
    textColor = color
    numberOfLines = <span class="hljs-number">0</span>

    sizeToFit()
}
</code></pre>
<ul>
<li>调整 <code>messageLabel</code> 的懒加载代码</li>
</ul>
<pre><code class="lang-swift">private lazy <span class="hljs-keyword">var</span> messageLabel: <span class="hljs-type">UILabel</span> = <span class="hljs-type">UILabel</span>(title: <span class="hljs-string">"关注一些人，回这里看看有什么惊喜关注一些人，回这里看看有什么惊喜"</span>, fontSize: <span class="hljs-number">14</span>, color: <span class="hljs-type">UIColor</span>.darkGrayColor())
</code></pre>
<ul>
<li>添加遮罩图片视图</li>
</ul>
<pre><code class="lang-swift"><span class="hljs-comment">/// 遮罩视图</span>
private lazy <span class="hljs-keyword">var</span> maskIconView: <span class="hljs-type">UIImageView</span> = <span class="hljs-type">UIImageView</span>(imageName: <span class="hljs-string">"visitordiscover_feed_mask_smallicon"</span>)
</code></pre>
<pre><code class="lang-swift"><span class="hljs-comment">// 1. 添加控件</span>
addSubview(iconView)
addSubview(maskIconView)
addSubview(homeIconView)
...
</code></pre>
<ul>
<li>遮罩图片自动布局</li>
</ul>
<pre><code class="lang-swift"><span class="hljs-comment">// 6. 遮罩视图</span>
addConstraints(<span class="hljs-type">NSLayoutConstraint</span>.constraintsWithVisualFormat(<span class="hljs-string">"H:|-0-[maskIconView]-0-|"</span>, options: [], metrics: <span class="hljs-built_in">nil</span>, views: [<span class="hljs-string">"maskIconView"</span>: maskIconView]))
addConstraints(<span class="hljs-type">NSLayoutConstraint</span>.constraintsWithVisualFormat(<span class="hljs-string">"V:|-0-[maskIconView]-(regBtnHeight)-[registerButton]"</span>, options: [], metrics: [<span class="hljs-string">"regBtnHeight"</span>: -<span class="hljs-number">36</span>], views: [<span class="hljs-string">"maskIconView"</span>: maskIconView, <span class="hljs-string">"registerButton"</span>: registerButton]))
</code></pre>
<ul>
<li>视图背景颜色</li>
</ul>
<pre><code class="lang-swift"><span class="hljs-comment">// 3. 设置视图背景颜色</span>
backgroundColor = <span class="hljs-type">UIColor</span>(white: <span class="hljs-number">237.0</span> / <span class="hljs-number">255.0</span>, alpha: <span class="hljs-number">1.0</span>)
</code></pre>
<blockquote>
<p>运行测试</p>
</blockquote>
<h2 id="">小结</h2>
<ul>
<li>自动布局核心公式</li>
</ul>
<pre><code class="lang-swift">view1.attr1 = view2.attr2 * multiplier + constant
</code></pre>
<ul>
<li>自动布局构造函数</li>
</ul>
<pre><code class="lang-swift"><span class="hljs-type">NSLayoutConstraint</span>(item: 视图, 
    attribute: 约束属性, 
    relatedBy: 约束关系, 
    toItem: 参照视图, 
    attribute: 参照属性, 
    multiplier: 乘积, 
    constant: 约束数值)
</code></pre>
<ul>
<li><p>如果指定<code>宽</code> <code>高</code> 约束</p>
<ul>
<li>参照视图设置为 <code>nil</code></li>
<li>参照属性选择 <code>.NotAnAttribute</code></li>
</ul>
</li>
<li><p>自动布局类函数</p>
</li>
</ul>
<pre><code class="lang-swift"><span class="hljs-type">NSLayoutConstraint</span>.constraintsWithVisualFormat(<span class="hljs-type">VLF</span>公式, 
    options: [], 
    metrics: 约束数值字典 [<span class="hljs-type">String</span>: 数值], 
    views: 视图字典 [<span class="hljs-type">String</span>: 子视图])
</code></pre>
<ul>
<li><p>VFL 可视化格式语言</p>
<ul>
<li><code>H</code> 水平方向</li>
<li><code>V</code> 垂直方向</li>
<li><code>|</code> 边界</li>
<li><code>[]</code> 包含控件的名称字符串，对应关系在 <code>views</code> 字典中定义</li>
<li><code>()</code> 定义控件的宽/高，可以在 <code>metrics</code> 中指定</li>
</ul>
</li>
</ul>

                    
                    </section>
                
                
                </div>
            </div>
        </div>

        
        <a href="../visitor/base table view controller.html" class="navigation navigation-prev " aria-label="Previous page: 表格视图控制器基类"><i class="fa fa-angle-left"></i></a>
        
        
        <a href="../visitor/setup login info.html" class="navigation navigation-next " aria-label="Next page: 设置未登录信息"><i class="fa fa-angle-right"></i></a>
        
    </div>
</div>

        
<script src="../gitbook/app.js"></script>

    
    <script src="https://cdn.mathjax.org/mathjax/2.4-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
    

    
    <script src="../gitbook/plugins/gitbook-plugin-mathjax/plugin.js"></script>
    

<script>
require(["gitbook"], function(gitbook) {
    var config = {"fontSettings":{"theme":null,"family":"sans","size":2}};
    gitbook.start(config);
});
</script>

        
    </body>
    
</html>
